<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //1.js的typeof返回哪些数据类型
        // console.log(typeof 123)   number
        // console.log(typeof 'ab') string
        // console.log(typeof true) boolean
        // console.log(typeof undefined) undefined
        // console.log(typeof null)  Object

        //2.split和join的区别
        // console.log('1,2,3'.split(','))//["1", "2", "3"]
        //split获取一个字符串，用分隔符断开后，返回一个字符串
        // console.log([1,2,3].join('-')) //1-2-3
        //join相当于转换，将逗号换成了-

        //3.事件委托是什么
        //又称事件代理，就是将一个元素的响应事件委托给另一个元素，通常委托给父元素和更外层元素上
        //事件委托在冒泡阶段完成，应用场景：父级元素下又很多子元素时可以使用，可以提高性能
        //适合事件委托的事件 onclick mousedown mouseup等

        //4.添加 删除 替换 插入到某个节点的方法
        // appendChild//添加
        // removeChild//删除
        // insertBefore//插入
        // replaceChild//替换

        //5.获取到页面中所有checkbox怎么做
        // var arr=document.getElementsByTagName('input')//获取所有的input标签对象
        // var newarr=[] //用来存放CheckBox对象
        // for(var i=0;i<arr.length;i++){//找到所有的input标签
        //     var obj=arr[i]
        //     if(obj.type=="checkbox"){//找到值为CheckBox的
        //         newarr.push(obj)//赋值给新数组
        //     }
        // }

        //6.
        // var foo="11"+2-"1";
        // console.log(foo)//111
        // console.log(typeof foo)//number
        //加号是拼接的意思，所以前面为112,112-1就是111，所以返回的数据类型是number

        //7.已有字符串foo="get-element-by-id",写一个function将其转化为驼峰式命名法“getElementById"
        //   var foo="get-element-by-id"
        //   function f(arr){
        //      var newfoo=arr.split("-")//['get','element','by','id']
        //      for(var i=1;i<newfoo.length;i++){//i从1开始是因为get的首字母不需要大写
        //          newfoo[i]=newfoo[i].charAt(0).toUpperCase()+newfoo[i].slice(1)
        //          //charat是返回字符串的第几个字符，0代表返回第一个字符，toUpperCase是转化为大写这里得到了E B I
        //          //+newfoo[i].slice(1)拼接EBI，相当于代替了小写的ebi,所以用了slice（1）
        //      }
        //      arr=newfoo.join("")//将数组转化为字符串
        //      return arr
        //   }
        //   console.log(f(foo))

        // 8.请介绍js中splice的用法
        //splice可用于删除、替换、添加会改变原来的数组
        //有三个参数开始位置(下标)、删除的个数、添加的值（添加在开始位置之前）
        //删除 （开始下标，删除数量）
        // var arr=[1,2,3,4]
        // console.log(arr.splice(0,2))//1,2
        //添加（插入位置下标，0，添加的值）
        // var arr=[1,2,3,4]
        // let newarr=arr.splice(1,0,"he")
        // console.log(arr)//[1, "he", 2, 3, 4]
        //替换(起始位置，删除的项数，插入任意数量的项)
        // var arr=[1,2,3]
        // let newarr=arr.splice(1,2,'my','she')
        // console.log(arr)// [1, "my", "she"]

        //9.比较attachEvent和addeventListener
        //         相同点：都是dom对象的方法，可以实现一种事件绑定多个事件处理函数。
        //不同点：.多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。
        //addeventListener共有3个参数
        //第一个参数表示事件名称（不含 on，如 "click"）；第二个参数表示要接收事件处理的函数；第三个参数是一个boolean值，一般为false
        //attachEvent共有2个参数
        //attachEvent方法两个参数：第一个参数为事件名称，第二个参数为接收事件处理的函数；

        //10.圆的css样式
        // {
        //     width:100px;
        //     height:100px;
        //     border-radius:50%;
        //     background-color:plum;
        // }

        //11.垂直水平居中
        // #inner{
        //     width: 50px;
        //     height: 50px;
        //     background - color: aquamarine;
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     right: 0;
        //     bottom: 0;
        //     margin: auto;
        // }
        // #inner{
        //     width: 50px;
        //     height: 50px;
        //     background - color: aquamarine;
        //     position: absolute;
        //     top: 50 %;
        //     left: 50 %;
        //     margin - top: -25px;
        //     margin - left: -25px;
        // }
        // #inner{
        //     width: 50px;
        //     height: 50px;
        //     background - color: aquamarine;
        //     position: absolute;
        //     top: 50 %;
        //     left: 50 %;
        //     transform: translate(-50 %, -50 %);
        // }   
        
        //12.找出arr数组中重复出现过的元素
        // var arr=[1,2,3,4,4,8,5,6,7,5].sort()
        // console.log(arr)
        // function f(arr){
        //     var newarr=[]//存放出现过的元素
        //     for(i=0;i<arr.length;i++){//找到数组中的每一项
        //        if(arr[i]==arr[i+1]){//判断前一项和后一项是否相同
        //            newarr.push(arr[i]);//相同的存放到空数组中
        //        }
        //     }
        //     return newarr
        // }
        // console.log(f(arr))

        //13.
        // var url='http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'
        // var arr=url.split("?",2)[1]
        // console.log(arr)
        // let brr=arr.split("&")
        // console.log(brr);

        //14.
        // for (var i = 0; i <= 3; i++) {
        //        setTimeout(function(){
        //             console.log(i);
        //         },0)
        //       }//输出四个4
               
        for (var i = 0; i <= 3; i++) {
                    ((a) => {
                        setTimeout(() => {
                            console.log(a);//0,1,2,3
                        }, 100)
                    })(i); //接受外部参数
        
                }
                // console.log(i); 
    </script>
</body>

</html>